<template>
	<view class="all">
		
	
	<view class="container">
		<view class="content">
			任务分配
		</view>
		<view class="person" v-for="(person, index) in Object.entries(tasks)" :key="index">
			<view class="person-header" @click="toggleTask(index)">
				<view class="person-name">{{ person[0] === 'person1' ? '韩月生' : '张子涵' }}</view>
				<view class="toggle-icon">{{ expanded[index] ? '▲' : '▼' }}</view>
			</view>
			<view class="person-tasks" v-show="expanded[index]">
				<view class="person-task" v-for="(task, taskIndex) in person[1]" :key="taskIndex">
					{{ task }}
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';

	const tasks = ref({
		person1: ['首页', '登录注册', '天气预报', '游玩', ],
		person2: ['首页', '热映电影', '微博热搜', '每日运势', '问答']
	});

	const expanded = ref([false, false]);

	const toggleTask = (index) => {
		expanded.value[index] = !expanded.value[index];
	};
</script>

<style>
	/* body{
		background: url('/static/images/1.png');
	}
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px;
		background: url('/static/images/1.png');
	}

	.content {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 20px;
	}

	.person {
		width: 100%;
		max-width: 600px;
		padding: 20px;
		margin-bottom: 20px;
		background-color: white;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}

	.person-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20px;
		font-weight: bold;
		color: #333;
		cursor: pointer;
		padding: 10px;
		border-bottom: 1px solid #eee;
	}

	.toggle-icon {
		font-size: 24px;
		font-weight: bold;
		color: #666;
	}

	.person-tasks {
		margin-left: 20px;
	}

	.person-task {
		font-size: 16px;
		color: #666;
		margin-bottom: 5px;
	} */
</style>